<template>
  <div class="reports">
    <div class="header">
      <!-- 打卡 -->
      <router-link to="/Backstage" class="shou">首页</router-link>/ 数据统计 / 数据报表
    </div>
    <div id="main" style="width: 900px;height:550px;"></div>
  </div>
</template>

<script>
import axios from "axios";
import { zxt } from "../../api/api.js";
export default {
  name: "reports",
  data() {
    return {
      option: null
    };
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option, true);
    },
    xin() {
      zxt({
        type: 1
      }).then(res => {
        console.log(res);
        if (res.data.meta.status >= 200 && res.data.meta.status < 300) {
          this.option = res.data.data;
          let tooltip = {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985"
              }
            }
          };
          let toolbox = {
            feature: {
              saveAsImage: {}
            }
          };
          this.$set(this.option, "tooltip", tooltip);
          this.$set(this.option, "toolbox", toolbox);
          this.drawChart();
        }
      });
    }
  },
  created() {
    this.xin();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.reports {
  height: 832px;
  width: 1620px;
  background-color: #fff;
  border: 1px solid #e9eef3;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  font-size: 14px;
  padding: 20px;
  overflow: scroll;
  overflow-x: auto;
}
.header {
  color: #606266;
  letter-spacing: 2px;
}
.shou {
  font-weight: bold;
  color: black;
}
</style>
